<template>
  <div class="sub-header">
    <div class="sub-content" :style="{backgroundImage:`url(${bgImage})`}">
      <div>
        <div class="name">{{name}}</div>
        <div class="title" v-if="title">{{title}}</div>
        <div class="subTitle" v-if="subTitle">{{subTitle}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    bgImage: {
      type: String,
      default: ()=>require("#/assets/img/wall/wall.png")
    },
    // 主标题
    name: {
      type: String,
      default: ()=> ''
    },
    // 副标题
    title: {
      type: String,
      default: ()=> ''
    },
    // 副标题下的副标题
    subTitle: {
      type: String,
      default: ()=> ''
    }
  },
  data() {
    return {};
  }
};
</script>
<style lang="scss" scoped>
    .sub-header{
        width:100%;
        height:1.42rem;
        box-sizing: border-box;
        padding:0.15rem;
        .sub-content{
            height:1.12rem;
            width:100%;
            display: flex;
            justify-content:space-around;
            align-items: center;
            text-align: center;
            color:#3D3D3D;
            .name{
                font-size:0.44rem;
                
            }
            .title{
              font-size:0.12rem;
            }
            .subTitle{
              font-size:0.11rem;
            }
        }
    }
</style>